<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			#box {
				/*display: none;*/
			}
			

		</style>
	</head>
	<body>
		<p>这是p元素</p>
		<div id="box">
			哈哈
			<!-- 呵呵 -->
			呵呵
			<div>哈哈</div>
			<!-- 

				p标签解析时末尾多一个br
			 -->
			<p>黄瓜</p>
		</div>
		<p>这是p2元素</p>
		
	</body>
</html>
<script>



	// 特殊节点
	// 根节点
	console.log(document);

	// 声明节点
	console.log(document.doctype);

	// head
	console.log(document.head);

	// body
	console.log(document.body);

	// html
	console.log(document.documentElement);

	// 通过id获取元素
	var boxDiv = document.getElementById('box');

	// 获取box下面的所有节点
	console.log(boxDiv.childNodes);

	// 获取第一个子节点
	console.log(boxDiv.firstChild);

	// 获取元素的最后一个节点
	console.log(boxDiv.lastChild);

	// 获取第二个节点
	console.log(111);
	var second = boxDiv.childNodes[1];
	console.log(second);

	// 前一个兄弟节点
	var prevNode = second.previousSibling;
	console.log(prevNode);

	// 获取下一个兄弟节点
	var nextNode = second.nextSibling;
	console.log(nextNode);


	// 获取父节点
	var parentNode = second.parentNode;
	console.log(parentNode);

	console.log(second.parentNode.parentNode.previousSibling.parentNode);

	// 获取元素下的所有元素节点
	console.log(boxDiv.children);

	// 获取第一个子元素节点
	console.log(boxDiv.firstElementChild);
	// 获取最后一个子元素节点
	console.log(boxDiv.lastElementChild);

	// 获取父元素节点
	console.log(boxDiv.parentElement);

	// 获取前一个兄弟元素节点
	console.log(boxDiv.previousElementSibling);
	// 获取下一个兄弟元素节点
	console.log(boxDiv.nextElementSibling);

	// 获取元素中的所有内容
	console.log(boxDiv.innerHTML);
	console.log("---------");
	// 只获取元素中的文本, 会过滤掉内容前面和后面的空白符
	// 当该元素为display: none时, 空白符不会被过滤, 当该元素为visibility: hidden的时候, innerText没有内容
	console.log(boxDiv.innerText);
	console.log("----------");

	// 只获取文本内容, 不会过滤掉内容前面和后面的空白符
	console.log(boxDiv.textContent);


	// 节点类型 nodeType
	// 根节点 9
	console.log(document.nodeType);
	// 节点值 nodeValue, 只有文本节点和注释节点有值
	console.log(document.nodeValue);
	// nodeName 节点名称 
	// #document
	console.log(document.nodeName);

	// 元素节点 1
	console.log(boxDiv.nodeType);
	console.log(boxDiv.nodeValue);
	// 大写标签名
	console.log(boxDiv.nodeName);

	// 注释节点 8
	console.log(second.nodeType);
	console.log(second.nodeValue);
	// #comment
	console.log(second.nodeName);

	// 文本节点 3
	console.log(prevNode.nodeType);
	console.log(prevNode.nodeValue);
	// #text
	console.log(prevNode.nodeName);

	// 声明节点 10
	console.log(document.doctype.nodeType);
	console.log(document.doctype.nodeValue);
	// 类型 html
	console.log(document.doctype.nodeName);

	// hasChildNodes方法判断有没有子节点
	if (boxDiv.hasChildNodes()) {
		console.log("有子节点");
	} else {
		console.log("没有子节点");
	}



</script>